<template>
  <div class="news">
     <!-- style="display:inline-block" -->
    <div class="topFood">
      <h2>食品舆情</h2>
      <el-date-picker
        v-model="date"
        @change="onDateChange"
        size="small"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        style="float: right">
      </el-date-picker>
    </div>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column
        prop="theme"
        label="新闻标题">
      </el-table-column>
      <el-table-column
        prop="foodName"
        label="相关食品">
      </el-table-column>
      <el-table-column
        prop="riskSubstance"
        label="风险物质">
      </el-table-column>
      <el-table-column
        prop="relativeUnit"
        label="相关单位">
      </el-table-column>
      <el-table-column
        prop="link"
        label="新闻链接">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNews } from '@/api/public'

export default {
  data() {
    return {
      date: '',
      tableData: [],
      loading: false
    }
  },
  created() {
    const date = this.$route.query.date
    this.date = date || new Date()

    this.getNews()
  },
  methods: {
    getNews() {
      this.loading = true
      getNews({ date: this.date }).then((res) => {
        if (Array.isArray(res)) {
          const tableData = res.map((item) => {
            return {
              relativeUnit: item[1],
              foodName: item[0],
              theme: item[3],
              link: item[4],
              riskSubstance: item[2]
            }
          })

          this.tableData = tableData
        } else {
          this.tableData = []
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 选择时间
     */
    onDateChange() {
      this.getNews()
    }
  }
}
</script>

<style lang="scss" scoped>
.topFood {
  margin:10px 20px;
  h2 {
    display: inline-block;
  }
}

.news {
  height: calc(100vh - 160px);
  background: #fff;
  padding: 10px;
}
</style>
